<template>
  <div class="list_container">
    <header class="article-header">
      <h1 class="article-title" itemprop="name">{{ detailObj.title }}</h1>
      <span style="display: inline" class="archive-article-date"> 阅读数： <span>93899</span>次</span>
      <time class="archive-article-date" style="margin-left: 10px; margin-right: 10px">时间： {{ detailObj.time }}</time>
      <span style="display: inline" class="archive-article-date">
        作者： <span>{{ detailObj.author }}</span>
      </span>
    </header>
    <div class="article-entry">
      <div v-html="detailObj.detailText"></div>
    </div>
  </div>
</template>

<script>
import { getList } from '@projects/manager/api/list'
// import 'mavon-editor/dist/markdown/github-markdown.min.css'
// import hljs from 'highlight.js'
// import 'highlight.js/styles/vs2015.css'
export default {
  components: {},
  directives: {
    // highlight: {
    //   inserted(el) {
    //     const preEl = document.querySelectorAll('pre code')
    //     preEl.forEach((el) => {
    //       hljs.highlightBlock(el)
    //     })
    //   }
    // }
  },
  props: {},
  data() {
    return {
      detailObj: {},
      loading: false
    }
  },
  computed: {
    getTagList() {
      return (list) => {
        return list === undefined ? '' : JSON.parse(list)
      }
    }
  },
  mounted() {
    this.getTableList()
  },
  watch: {
    $route(val) {}
  },
  beforeDestroy() {},
  methods: {
    getTableList() {
      this.loading = true
      getList({ parentId: this.$route.query?.id }).then((res) => {
        this.detailObj = res[0]
        this.loading = false
      })
    }
  }
}
</script>
<style lang="scss">
::-webkit-scrollbar {
  width: 0 !important;
}

.list_container .article-entry blockquote {
  padding: 15px 20px;
  margin-top: 10px;
  border-left: 5px solid #657b83;
  background: #f6f6f6;
  margin-left: 0;
  width: 100%;
}
.list_container pre {
  word-wrap: normal;
  word-break: break-all;
  white-space: pre;
  overflow-x: scroll;
  overscroll-behavior-x: contain;
  margin-top: 0;
  margin-bottom: 20px;
  border-radius: 4px;
  z-index: 0;
  padding: 1em;
  line-height: 1.5;
  color: #ccc;
  background: #2d2d2d;
  font-size: 15px;
  font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
}
</style>
<style lang="scss" scoped>
.list_container {
  margin: 30px;
  background: white;
  .article-header {
    border-left: 5px solid #4d4d4d;
    padding: 30px 0 15px 7.6923%;
  }
}

.article-entry ul li:before {
  content: '';
  width: 6px;
  height: 6px;
  border: 1px solid #999;
  border-radius: 10px;
  background: #aaa;
  display: inline-block;
  margin-right: 10px;
  float: left;
  margin-top: 10px;
}
.article-entry strong {
  font-weight: 700;
  color: #1a1a1a;
}
.article-entry {
  line-height: 1.8em;
  padding-right: 7.6923%;
  padding-left: 7.6923%;
  padding-bottom: 20px;
  li {
    color: #1a1a1a;
  }
}
</style>
